<template>
  <div class="w-full h-screen">
    <header class="w-full h-16 bg-blue-800 text-white flex items-center p-4">
      <h1 class="text-2xl">Main App</h1>
      <nav class="ml-10">
        <router-link to="/app1" class="p-2 text-white hover:bg-yellow-700">App 1</router-link>
        <router-link to="/app2" class="p-2 hover:bg-yellow-700">App 2</router-link>
      </nav>
    </header>
    <main class="p-4">
      <div id="subapp-container"></div>
    </main>
  </div>
</template>

<script setup lang="ts">
</script>

<style>
body {
  margin: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>